<template>
	<view class="repair-wrap">
		<view class="u-m-t-10 repair-box u-p-30 u-p-l-30 u-p-r-30">
			<view class="header-li">
				<view style="width: 98px;">
					<h4><span class="important">*</span>拾取小区</h4>
				</view>
				<view class="form-select">{{proName}}</view>
			</view>
			<view class="header-li">
				<view style="width: 98px;">
					<h4><span class="important">*</span>失物名称</h4>
				</view>
				<view class="input1">
					<u-input v-model="ruleFrom.goods_title" placeholder="请输入标题" />
				</view>

			</view>
			<view style="color: #999;margin-top: 3px;">（如：捡到手表、一串钥匙、身份证、手机等物品）</view>
			<view class="header-li">
				<view style="width: 98px;">
					<h4><span class="important">*</span>拾取时间</h4>
				</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
			<view class="header-li">
				<view style="width: 98px;">
					<h4><span class="important">*</span>拾取地点</h4>
				</view>
				<view class="input1">
					<u-input v-model="ruleFrom.pick_address" placeholder="请输入拾取地点" />
				</view>
			</view>
		</view>

		<view class="u-m-t-10 repair-box u-p-30 u-p-l-30 u-p-r-30">
			<view class="header-li" style="background: #fff;">
				<view style="width: 120px;">
					<h4>是否转交物业</h4>
				</view>
				<view class="input">
					<view class="tab-type">
						<view @click="ruleFrom.goods_type = 0" :class="ruleFrom.goods_type === 0 ? 'shi' : 'fou'">是
						</view>
						<view @click="ruleFrom.goods_type = 1" :class="ruleFrom.goods_type === 1 ? 'shi' : 'fou'">否
						</view>
					</view>
				</view>
			</view>
			<view class="header-li" v-if="ruleFrom.goods_type == 0">
				<view style="width: 98px;">
					<h4><span class="important">*</span>领取电话</h4>
				</view>
				<view class="input1">
					<u-input v-model="ruleFrom.contact_phone" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="header-li" v-if="ruleFrom.goods_type == 0">
				<view style="width: 98px;">
					<h4><span class="important">*</span>领取人员</h4>
				</view>
				<view class="input1">
					<u-input v-model="ruleFrom.contact_person" placeholder="请输入联系人" />
				</view>
			</view>
		</view>
		<view class="u-m-t-10 repair-box u-p-30 u-p-l-30 u-p-r-30">
			<view style="display:flex;align-items: center;">
				<view style="width: 98px;font-weight: bold;">
					<h4><span class="important">*</span>描述</h4>
				</view>
				<view class='guar-text' style="margin-left: 20rpx;">
					<u-input style="width:570rpx" v-model="ruleFrom.goods_describe" placeholder="请输入物品的特点" type="text"
						:border="true" />
				</view>
			</view>
			<view style="display: flex;margin-top: 18px;">
				<view class="guarn-box guarn-box2 u-m-t-20" v-if="ruleFrom.goods_images">
					<view class="guarn-box2-img">
						<image :src="ruleFrom.goods_images"></image>
						<u-icon @click="colseImg(ruleFrom.goods_images)" name="close" color="red" size="40"
							class="guarn-box2-img-close"></u-icon>
					</view>
				</view>
				<view class="guarn-box u-m-t-20" style="margin-left: 8px;">
					<view @click="uoloadHouse" v-if="ruleFrom.goods_images == null" style="color: blue;display: flex;">
						<image style="width: 20px;height: 18px;margin-top: -1px;margin-right: 3px;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/uploading.png" mode=""></image>
						<view>点击上传图片</view>
					</view>
				</view>
				<view>
					
				</view>
				<span style="color: #999;padding: 10px 0;">
					(最多上传1张照片)
				</span>
			</view>
		</view>
		<view style="padding-bottom: 50px;padding-top:40rpx;background: #fff;">
			<button class="yilingqu" @click="handlerSubmitButton">确认发布</button>
		</view>
	</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	import LbPicker from '@/components/lb-picker'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				imgFlag: true,
				ruleFrom: {
					user_id: uni.getStorageSync('rawData').userId, //用户id
					project_id: uni.getStorageSync('projectItem').proId, //项目id
					goods_title: null, //物品标题
					pick_time: null, //拾捡时间
					pick_address: null, //拾捡地点
					contact_phone: null, //联系电话
					contact_person: uni.getStorageSync('rawData').userName, //联系人
					goods_describe: null, //物品描述
					goods_images: null, //物品凭证
					goods_type: 0, //0在物业 1 不在
				},
				date: currentDate,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			this.proName = uni.getStorageSync('projectItem').proName
		},
		methods: {
			handlerSubmitButton() {
				this.ruleFrom.pick_time = this.date
				console.log(this.ruleFrom)
				this.$request.api.getLostatr(this.ruleFrom).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: 'success'
						});
						this.ruleFrom.goods_title = null; //物品标题
						this.ruleFrom.pick_time = null; //拾捡时间
						this.ruleFrom.pick_address = null; //拾捡地点
						this.ruleFrom.contact_phone = null; //联系电话
						this.ruleFrom.goods_describe = null; //物品描述
						this.ruleFrom.goods_images = null; //物品凭证
						setTimeout(function() {
							uni.navigateTo({ //跳转页面
								url: "/pages/lostarticle/lostarticle"
							})

						}, 200)

					} else {
						uni.showToast({
							title: '请重新检查参数！',
							icon: 'none'
						});
					}
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(this.date)
				this.ruleFrom.pick_time = this.date
				console.log(this.ruleFrom.pick_time)
			},
			colseImg(val) {
				this.ruleFrom.goods_images = null;
				if (!this.ruleFrom.goods_images) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 3, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									uni.showLoading({
										title: '上传中'
									});
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleFrom.goods_images = res.data.data
											_this.imgFlag = false;
											uni.hideLoading();
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									uni.showLoading({
										title: '上传中'
									});
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleFrom.goods_images = res.data.data
											_this.imgFlag = false;
											uni.hideLoading();
										})
									})
								}

							});
						}

					},
					fail: function(res) {}
				});
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;
		.repair-box {
			background: #fff;
			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;
				.repair-titel-l {
					float: left;
				}
				.repair-titel-r {
					float: right;
					color: #999;
				}
			}
			.repair-6 {
				color: #666;
			}
		}
	}
	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}
	.guar-class-box {
		width: 196rpx;
		height: 68rpx;
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		border: 2rpx solid #ccc;

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}

	.guar-class-box-active {
		border-color: #FEEED6;
		background: #FEEED6;
		color: #F9A832;
	}

	.guar-back-f {
		width: 100%;
		height: 20rpx;
		background: #f4f4f4;
	}

	.guar-text textarea {
		width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		border-radius: 30rpx;
	}
	.guarn-box2 {
		display: flex;
	}
	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}

	.guarn-box-img {
		width: 150rpx;
		height: 150rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}

	.guarn-box-img image {
		width: 76rpx;
		height: 68rpx;
	}

	.guarn-box-txt {
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}

	.guar-txt-time {
		float: right;
		text-align: right;
		width: 420rpx;
	}

	.custom-style {
		color: #F9AF3A;
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.input {
		width: 400rpx;
		text-align: left;
		line-height: 200%;
		margin-top: 10px;
	}

	.tab-type {
		width: 254rpx;
		height: 32px;
		border-radius: 6rpx 0rpx 0rpx 6rpx;
		border: 2rpx solid #578ef0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shi {
		width: 126rpx;
		height: 60rpx;
		background: #4a90e2;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
	}

	.fou {
		width: 126rpx;
		height: 60rpx;
		background: #ffffff;
		text-align: center;
		line-height: 60rpx;
		color: #4a90e2;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.input1 {
		width: 400rpx;
		text-align: left;
		margin-top: 8px;
		line-height: 200%;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
</style>